<template>
	<view class="composition">
		<view class="empty" v-if="list.length <= 0">
			<img src="@/static/images/empty_data.png" alt="" class="empty-data" mode="widthFix">
		</view>
		<view class="" v-for="(item,index) in list" :key="index">
			<view class="composition-item" style="margin-bottom: 20rpx;" >
				<!-- 中间主体 -->
				<view class="composition-item-content u-flex">
					<!-- 左侧图片 -->
					<img :src="item.image" alt="" mode="widthFix" class="detail-img">
					<!-- 右侧信息 -->
					<view class="composition-item-right">
						<view class="name u-line-1">
							{{item.title}}
						</view>
						<view class="desc u-line-1">
							规格:{{item.photo_max}}
						</view>
						<view class="photo-num">
							制作时间:{{item.createtime}}
						</view>
						<view class="photo-num">
							商品名称:{{item.goods_title}}
						</view>
					</view>
				</view>
				<!-- 右上角 -->
				<view class="edit-options" @click="showEdit(item)">
					<u-icon name="edit-pen" color="#666666" size="38"></u-icon>
				</view>
				<view class="status">
					状态：{{statusMap[item.is_finish]}}
				</view>
				<!-- 底部操作 -->
				<view class="options">
					<button class="btn btn-make" @click="toMake(item)" v-if="item.is_finish == 0">开始制作</button>
					<button class="btn btn-more-template" @click="moreTemplate(item)" v-if="item.is_finish == 0">更多模板</button>
					<button class="btn btn-preview" @click="toSee(item)" v-if="item.is_finish == 2">预览电子册</button>
				</view>
			</view>
		</view>
		
		<!-- 编辑作品弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="16">
			<view class="composition-add-popup">
				<u-form :model="form" ref="uForm" :rules="rules" label-position="top" :label-style="{'color':'#333333','font-weight':'600'}">
					<u-form-item label="作品名称" prop="title"><u-input v-model="form.title" /></u-form-item>
					<u-form-item label="作者" prop="author"><u-input v-model="form.author" /></u-form-item>
				</u-form>
				<button @click="submit" class="composition-add-submit">确定</button>
			</view>
		</u-popup>
		
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
	</view>
</template>

<script>
	import http from '@/pages/request/index'
	
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				list:[],
				show:false,
				statusMap:{
					'0':'上传图片',
					'1':'设计师排版',
					'2':'印刷厂印刷'
				},
				id:'',
				form:{
					title:'',
					author:''
				},
				rules: {
					title: [
						{ 
							required: true, 
							message: '请输入名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					author: [
						{
							required: true,
							message: '请输入作者', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				}
			};
		},
		computed: {
			...mapGetters(['authType'])
		},
		onLoad() {
			
		},
		onShow(){
			this.worksIndex()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						http('works.edit',{id:this.id,...this.form}).then(res=>{
							console.log(res);
							uni.showToast({
								title: '修改成功',
								duration: 2000,
								// image: require('@/static/images/icon_success.png')
							});
							this.worksIndex()
						})
						this.show = false
					} else {
						console.log('验证失败');
					}
				});
			},
			// 作品列表
			worksIndex(){
				http('works.index',{page:1,pagesize:100}).then(res=>{
					console.log(res);
					this.list = res.data.list
				})
			},
			showEdit(item){
				this.$refs.uForm.setRules(this.rules);
				this.show = true
				this.id = item.id
				this.form.author = item.author
				this.form.title = item.title
			},
			moreTemplate(item){
				uni.navigateTo({
					url: `/pages/composition/compositionTemplate?id=`+item.id
				});
			},
			toMake(item){
				uni.navigateTo({
					url: `/pages/album/albumSelect?id=`+item.id
				});
			},
			toSee(item){
				uni.navigateTo({
					url: `/pages/composition/compositionPreview?id=`+item.id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.composition {
		padding: 20rpx 24rpx;
		padding-bottom: 120rpx;
		.empty {
			width: 100%;
			text-align: center;
		}
		.composition-item {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			border-radius: 8px 8px 8px 8px;
			padding: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			.composition-item-content {
				font-size: 24rpx;
				color: #999999;
				vertical-align: middle;
				.detail-img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin: 0;
					padding: 0;
				}
				.composition-item-right {
					width: calc(100% - 220rpx);
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					.name {
						width: 100%;
						margin-top: 10rpx;
						font-weight: bold;
						color: #42494F;
						font-size: 32rpx;
						padding-right: 65rpx;
					}
				}
			}
			.edit-options {
				position: absolute;
				top: 35rpx;
				right: 24rpx;
			}
			.status {
				width: 100%;
				height: 42rpx;
				line-height: 42rpx;
				background: #F8F8F8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 20rpx;
			}
			.options {
				margin-top: 22rpx;
				height: 70rpx;
				padding-bottom: 6rpx;
				width: 100%;
				.btn {
					float: right;
					height: 64rpx;
					// background: #00C3C5;
					border-radius: 108rpx 108rpx 108rpx 108rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					// color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 500;
					margin: 0;
					border: none;
					margin-left: 20rpx;
				}
				.btn-make {
					border: 1rpx solid #00C3C5;
					color: #00C3C5;
				}
				.btn-more-template , .btn-preview {
					border: 1rpx solid #999999;
					color: #999999;
				}
			}
		}
		.composition-add {
			position: absolute;
			bottom: 200rpx;
			right: 20rpx;
			width: 88rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #00C3C5;
			border-radius: 50%;
		}
		.composition-add-popup {
			width: 90vw;
			padding: 42rpx;
			.composition-add-submit {
				width: 414rpx;
				height: 88rpx;
				background: #00C3C5;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40rpx;
			}
		}
	}
</style>